<template>
	<view :style="[{paddingTop:(tabIndex==1?CustomBar:(CustomBar+55))+'px'}]">
		<view class="header-tab" :style="[{paddingTop: StatusBar+'px'},{height: CustomBar+'px'}]">
			<view class="back" @click="BackPage">
				<text class="cuIcon-back"></text>
			</view>
			<view class="tabs">
				<view :class="tabIndex==1?'active':''" @click="changeIndex(1)">
					<text>大使专区</text>
					<text></text>
				</view>
				<view :class="tabIndex==2?'active':''" @click="changeIndex(2)">
					<text>分销店铺</text>
					<text></text>
				</view>
			</view>
		</view>
		<!-- 分销店铺 -->
		<view v-if="tabIndex==2">
			<view class="region-cont" :style="[{top:CustomBar+'px'}]">
				<view class="regin-item" @click="checkRegion('visitsFilter')">
					<view :class="visitsFilter!=''?'active':''">
						访问量
					</view>
					<view class="">
						<image v-if="visitsFilter && visitsFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/on-the-Angle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
						<image v-if="!visitsFilter || visitsFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-upward.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
						<image v-if="visitsFilter && visitsFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/suboccipital-triangle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
						<image v-if="!visitsFilter || visitsFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-down.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
					</view>
				</view>
				<view class="regin-item" @click="checkRegion('bountyFilter')">
					<view :class="bountyFilter!=''?'active':''">
						奖励金
					</view>
					<view class="">
						<image v-if="bountyFilter && bountyFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/on-the-Angle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
						<image v-if="!bountyFilter || bountyFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-upward.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
						<image v-if="bountyFilter && bountyFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/suboccipital-triangle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
						<image v-if="!bountyFilter || bountyFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-down.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
					</view>
				</view>
				<view class="regin-item" @click="checkRegion('saleFilter')">
					<view :class="saleFilter!=''?'active':''">
						销量
					</view>
					<view class="">
						<image v-if="saleFilter && saleFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/on-the-Angle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
						<image v-if="!saleFilter || saleFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-upward.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
						<image v-if="saleFilter && saleFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/suboccipital-triangle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
						<image v-if="!saleFilter || saleFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-down.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
					</view>
				</view>
				<view class="regin-item" @click="checkRegion('tariffFilter')">
					<view :class="tariffFilter!=''?'active':''">
						价格
					</view>
					<view class="">
						<image v-if="tariffFilter && tariffFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/on-the-Angle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
						<image v-if="!tariffFilter || tariffFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-upward.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
						<image v-if="tariffFilter && tariffFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/suboccipital-triangle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
						<image v-if="!tariffFilter || tariffFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-down.png?x-oss-process=image/resize,m_fill,h_8,w_16"
						 mode=""></image>
					</view>
				</view>
			</view>
			<view class="goods-list bottom-goods-list">
				<view class="goods-item" v-for="(item,index) in allBottomList" :key="index" @click="nav" :data-url="`/pages/shopsGoodShare?scene=${item.id}&ambassadorsMall=1`">
					<image :src="item.image+'?x-oss-process=image/resize,m_fill,h_220,w_220'" mode=""></image>
					<view class="">
						<view>{{item.product_name}}</view>
						<view class="">
							已售{{item.sales==0?'1':item.sales}}件
						</view>
						<view class="">
							<view class="">
								<text class="text-price text-colorP" v-if="item.price>0">{{item.price}}</text>
								<text class="text-colorP" v-if="item.integral>0 && item.price>0">+</text>
								<text class="text-colorP" v-if="item.integral>0">{{item.integral}}</text>
								<text class="text-colorP" v-if="item.integral>0">积分</text>
								<text class="text-price text-gray">{{item.ot_price}}</text>
							</view>
							<view class="">
								<text>邀好友赚</text>
								<text>{{item.max_money}}元</text>
							</view>
						</view>
					</view>
				</view>
				<tui-divider width="60%" :gradual="true" v-if="noMore">没有更多了</tui-divider>
				<no-content :showType="'search'" v-if='noContentShow' :tips="'暂时没有此类商品~'"></no-content>
			</view>
		</view>
		<view class="goods-new-list" v-if="tabIndex==1">
			<view class="new-item" v-for="(item,index) in goodsList" :key="index"  @click="nav" :data-url="`/pages/ambassGoodShare?scene=${item.id}`">
				<view class="top">
					<image :src="item.image+'?x-oss-process=image/resize,m_fill,h_240,w_340'"
					 mode=""></image>
					<text class="text-cut">{{item.b_name}}</text>
				</view>
				<view class="bottom">
					<view class="">
						{{item.product_name}}
					</view>
					<view class="">
						<view>
							推广专享¥{{item.generalize_price}}
						</view>
						<view class="">
							<text>赚¥{{item.max_money}}</text>
							<text>卖</text>
						</view>
					</view>
				</view>
			</view>

			<tui-divider width="60%" :gradual="true" v-if="noMoreGoods">没有更多了</tui-divider>
			<no-content :showType="'search'" v-if='noContentGoodsShow' :tips="'暂时没有此类商品~'"></no-content>
		</view>
	</view>
</template>

<script>
	import tuiDivider from "./component/divider.vue"
	import noContent from "./component/noContent.vue"
	export default {
		components: {
			tuiDivider,
			noContent
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				// 筛选
				visitsFilter: '',
				bountyFilter: '',
				saleFilter: '',
				tariffFilter: '',
				page: 1,
				lastPage: '',
				noMore: false,
				noContentShow: false,
				allBottomList: [],
				tabIndex: 1,
				// 商品
				goodsList: [],
				goodsPage: 1,
				goodsLastPage: '',
				noMoreGoods: false,
				noContentGoodsShow: false,
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		onReachBottom() {
			if (this.tabIndex == 2) {
				if (!this.lastPage) return
				if (this.page > this.lastPage && this.allBottomList.length > 0) {
					this.noMore = true
					return
				}
				this.getAll()
			} else {
				if (!this.goodsPage) return
				if (this.goodsPage > this.goodsLastPage && this.goodsList.length > 0) {
					this.noMoreGoods = true
					return
				}
				this.getGoodAll()
			}
		},
		onShow() {
			// 重新定位后重新获取数据
			if (uni.getStorageSync('isChangeCoordinate')) {
				this.getAll()
				uni.removeStorageSync('isChangeCoordinate')
			}
		},
		onLoad(options) {
			if (!uni.getStorageSync('coordinate')) {
				uni.navigateTo({
					url: '/pages/selectCity?currentCity=' + (this.cityName ? this.cityName : '西安市')
				})
			} else {
				this.getAll()
			}
			this.getGoodAll()
		},
		methods: {
			changeIndex(index) {
				this.tabIndex = index
			},
			checkRegion(region) {
				if (!this[region] || this[region] == 1) {
					this[region] = 2
				} else if (this[region] == 2) {
					this[region] = 1
				}
				this.page = 1
				this.lastPage = ''
				this.allBottomList = []
				this.noContentShow = false
				this.noMore = false
				this.getAll()
			},
			// 跳转
			nav(e) {
				var url = e.currentTarget.dataset.url
				if (url) {
					uni.navigateTo({
						url: url,
						fail() {
							uni.switchTab({
								url: url
							})
						}
					})
				}
			},
			getGoodAll() {
				var me = this;
				this.$request({
					url: '/Product/get_generalize_product',
					methods: 'GET',
					data: {
						page: me.goodsPage,
					},
					success: res => {
						if (res.data.status == 1) {
							var list = res.data.data.data
							if (res.data.data.totalNum == 0) {
								me.noContentGoodsShow = true
								return
							}
							if (list.length > 0) {
								me.goodsList = me.goodsList.concat(list)
								me.goodsPage++
								me.goodsLastPage = res.data.data.pageCount
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getAll() {
				var me = this;
				var coordinate = uni.getStorageSync('coordinate')
				this.$request({
					url: '/Product/get_distribution_product_order',
					methods: 'GET',
					data: {
						page: me.page,
						latitude: coordinate.latitude,
						longitude: coordinate.longitude,
						visit: me.visitsFilter ? (me.visitsFilter == 1 ? 'visit_desc' : 'visit_asc') : '',
						cash: me.bountyFilter ? (me.bountyFilter == 1 ? 'cash_desc' : 'cash_asc') : '',
						sales: me.saleFilter ? (me.saleFilter == 1 ? 'sales_desc' : 'sales_asc') : '',
						price: me.tariffFilter ? (me.tariffFilter == 1 ? 'price_desc' : 'price_asc') : ''
					},
					success: res => {
						if (res.data.status == 1) {
							var list = res.data.data.product_data
							if (res.data.data.totalNum == 0) {
								me.noContentShow = true
								return
							}
							if (list.length > 0) {
								me.allBottomList = me.allBottomList.concat(list)
								me.page++
								me.lastPage = res.data.data.pageCount
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			BackPage() {
				var length = getCurrentPages().length
				if (length == 1) {
					uni.switchTab({
						url: '/pages/tabBar/home'
					})
					return
				}
				uni.navigateBack({
					delta: 1
				});
			},

		}
	}
</script>

<style>
	page {
		background: #f5f5f5;
	}
</style>
<style scoped>
	.region-cont {
		width: 100%;
		display: flex;
		align-items: center;
		background: #fff;
		height: 88rpx;
		justify-content: space-between;
		position: fixed;
		left: 0;
		z-index: 9;
		border-bottom: solid 1rpx #efefef;
	}

	.regin-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.regin-item .active {
		color: #f34930 !important;
	}

	.regin-item>view:nth-child(1) {
		font-size: 30rpx;
		color: #333333;
		margin-right: 10rpx;
	}

	.regin-item>view:nth-child(2) {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.regin-item>view:nth-child(2) image {
		width: 16rpx;
		height: 8rpx;
	}

	.regin-item>view:nth-child(2) image:nth-child(1) {
		margin-bottom: 8rpx;
	}

	.goods-list {
		padding: 0 24rpx;
		width: 100%;
	}

	.goods-list .goods-item {
		width: 100%;
		background: #fff;
		height: 260rpx;
		border-radius: 8rpx;
		border: solid 1rpx #efefef;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.goods-list .goods-item image {
		width: 220rpx;
		height: 220rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		border: solid 1rpx #efefef;
	}

	.goods-list .goods-item>view {
		height: 215rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
	}

	.goods-list .goods-item>view>view:nth-child(1) {
		font-size: 30rpx;
		color: #333333;
		line-height: 36rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		max-width: 420rpx;
	}

	.goods-list .goods-item>view>view:nth-child(2) {
		font-size: 24rpx;
		line-height: 30rpx;
		letter-spacing: 1rpx;
		color: #333;
	}

	.goods-list .goods-item>view>view:nth-child(3) {
		display: flex;
		flex-direction: column;
	}

	.goods-list .goods-item>view>view:nth-child(3)>view:nth-child(1) {
		display: flex;
		align-items: center;
	}

	.goods-list .goods-item>view>view:nth-child(3)>view:nth-child(1)>text {
		font-weight: bold;
		font-size: 28rpx;
	}

	.goods-list .goods-item>view>view:nth-child(3)>view:nth-child(1)>text:last-child {
		text-decoration: line-through;
		margin-left: 10rpx;
		font-weight: normal;
		font-size: 24rpx;
	}

	.goods-list .goods-item>view>view:nth-child(3)>view:nth-child(2) {
		border: solid 1rpx #f34930;
		background-color: #ffffff;
		border-radius: 4rpx;
		height: 100%;
		margin-top: 10rpx;
		display: flex;
		width: 210rpx;
	}

	.goods-list .goods-item>view>view:nth-child(3)>view:nth-child(2)>text:nth-child(1) {
		display: inline-block;
		width: 100rpx;
		height: 100%;
		background-color: #f34930;
		border-radius: 4rpx 0rpx 0rpx 4rpx;
		font-size: 20rpx;
		color: #ffffff;
		text-align: center;
	}

	.goods-list .goods-item>view>view:nth-child(3)>view:nth-child(2)>text:nth-child(2) {
		padding: 0 10rpx;
		line-height: 32rpx;
		color: #f34930;
		font-size: 20rpx;
	}

	.distribution-centre-color {
		background-image: linear-gradient(-90deg,
			#f7b06e 0%,
			#f58353 43%,
			#f35638 100%);
	}

	.header-tab {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #fff;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0 10rpx;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, .1);
		z-index: 999;
	}

	.header-tab .back {
		width: 44rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.header-tab .back text {
		color: #333;
		font-size: 30rpx;
	}

	.tabs {
		flex: 1;
		display: flex;
		align-items: center;
		height: 88rpx;
	}

	.tabs>view {
		width: 145rpx;
		height: 88rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-right: 20rpx;
		padding-top: 20rpx;
	}

	.tabs>view>text:nth-child(1) {
		font-size: 32rpx;
		color: #333333;
		line-height: 50rpx;
	}

	.tabs>view>text:nth-child(2) {
		display: inline-block;

		width: 145rpx;
		height: 8rpx;
		backbackground: #fff;

		border-radius: 2rpx;
	}

	.tabs .active>text:nth-child(1) {
		font-weight: bold;
	}

	.tabs .active>text:nth-child(2) {
		font-weight: bold;
		background-image: linear-gradient(90deg,
			#f34930 0%,
			#ffaa99 100%),
			linear-gradient(#ffffff,
			#ffffff);
	}

	.goods-new-list {
		width: 100%;
		padding: 24rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.goods-new-list .new-item:nth-child(2n){
		margin-right: 0 !important;
	}

	.new-item {
		width: 340rpx;
		height: 478rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		border: solid 1rpx #efefef;
		display: flex;
		flex-direction: column;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.new-item .top {
		width: 100%;
		height: 240rpx;
		border-radius: 10rpx 10rpx 0 0;
		position: relative;
	}

	.new-item .top image {
		width: 100%;
		height: 240rpx;
		border-radius: 10rpx 10rpx 0 0;
	}

	.new-item .top text {
		display: inline-block;
		width: 100%;
		height: 36rpx;
		background-color: rgba(0, 0, 0, .5);
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 36rpx;
		max-width: 340rpx;
		text-align: center;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.new-item .bottom {
		flex: 1;
		width: 100%;
		padding: 15rpx 20rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.new-item .bottom>view:nth-child(1) {
		font-size: 30rpx;
		line-height: 36rpx;
		color: #666666;
		max-width: 300rpx;
		font-weight: bold;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.new-item .bottom>view:nth-child(2)>view:nth-child(1) {
		font-size: 30rpx;
		color: #333333;
	}

	.new-item .bottom>view:nth-child(2)>view:nth-child(2) {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.new-item .bottom>view:nth-child(2)>view:nth-child(2)>text:nth-child(1) {
		font-size: 30rpx;
		color: #f34930;
	}

	.new-item .bottom>view:nth-child(2)>view:nth-child(2)>text:nth-child(2) {
		font-size: 30rpx;
		color: #ffffff;
		display: inline-block;
		width: 112rpx;
		height: 48rpx;
		background-color: #f34930;
		box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(243, 73, 48, 0.4);
		border-radius: 24rpx;
		text-align: center;
		line-height: 48rpx;
	}
</style>
